
<!DOCTYPE html>
<html lang="zh-cn">

<head><meta name="generator" content="Hexo 3.8.0">
    <title>
        基本概述 - Admui 开发文档</title>
    <meta charset="utf-8">
    <meta name="keywords" content="admui,admui官网,admui框架,通用后台管理系统,后台框架,ui框架">
    <meta name="description" content="Admui 是一个基于最新 Web 技术的企业级通用管理系统快速开发框架，可以帮助企业极大的提高工作效率，节省开发成本，提升品牌形象">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!--[if lte IE 9]>
    <meta http-equiv="refresh" content="0; url='http://www.admui.com/ie'" />
    <![endif]-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">
    <meta name="msapplication-TileImage" content="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <meta name="msapplication-TileColor" content="#395b81">
    <link rel="apple-touch-icon-precomposed" href="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <link rel="shortcut icon" href="http://cdn.admui.com/site/img/app/favicon.png">
    <meta name="msapplication-TileColor" content="#62a8ea">
    <script>
        window.PAGE_TYPE = "ui"
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?cd758c4c82a4964836712308cb782b12";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <link rel="stylesheet" href="http://cdn.admui.com/docs/v2/css/page.css">
</head>

<body>
    <div id="mobile-bar">
        <a class="menu-button"></a>
        <a class="logo" href="../../pjax/index.html">Admui开发文档</a>
        <select class="version-select">
            <option value="basic">基础版</option>
            <option value="pjax">pjax版</option>
            <option value="iframe" selected>iframe版</option>
        </select>
    </div>
    <div id="header">
    <a id="logo" href="../../pjax/index.html">
        <img src="http://cdn.admui.com/docs/images/logo.svg"> <span>Admui 开发文档</span>
    </a>
    <select class="version-select">
        <option value="basic">基础版</option>
        <option value="pjax">pjax版</option>
        <option value="iframe" selected>iframe版</option>
    </select>
    <ul id="nav">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../1.x/index.html" class="nav-link">v1版本</a>
</li>

    </ul>
</div>
    
    <div id="main" class="fix-sidebar">
        
        
<div class="sidebar">
    <ul class="main-menu">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../1.x/index.html" class="nav-link">v1版本</a>
</li>

    </ul>
    <div class="list">
        <ul class="menu-root">
            
            <li>
                <a href="index.html" class="sidebar-link current ">
                    基本概述</a>
            </li>
            
            <li>
                <a href="themes.html" class="sidebar-link ">
                    主题说明</a>
            </li>
            
            <li>
                <a href="build.html" class="sidebar-link ">
                    构建工具</a>
            </li>
            
            <li>
                <a href="files.html" class="sidebar-link ">
                    入口文件</a>
            </li>
            
            <li>
                <a href="structure.html" class="sidebar-link ">
                    模板结构</a>
            </li>
            
            <li>
                <a href="hello-world.html" class="sidebar-link ">
                    Hello world</a>
            </li>
            
            <li>
                <a href="style.html" class="sidebar-link ">
                    自定义样式</a>
            </li>
            
            <li>
                <a href="javascript.html" class="sidebar-link ">
                    Javascript 方法</a>
            </li>
            
            <li>
                <a href="description.html" class="sidebar-link ">
                    特别说明</a>
            </li>
            
            <li>
                <a href="components.html" class="sidebar-link ">
                    UI 组件</a>
            </li>
            
            <li>
                <a href="plugins.html" class="sidebar-link ">
                    第三方插件</a>
            </li>
            
            <li>
                <a href="icons.html" class="sidebar-link ">
                    字体图标</a>
            </li>
            
            <li>
                <a href="code-guide.html" class="sidebar-link ">
                    编码规范</a>
            </li>
            
        </ul>
    </div>
</div>

<div class="content ui with-sidebar">
    <h1>基本概述</h1>
    <p>Admui 的追求的目标是做到开箱即用，无需了解框架内部机制，但是我们也深知一套框架不可能满足所有客户的所有需求，所以我们仍然为您准备了前端的开发文档，以满足部分客户的定制需求，我们会不断的完善这部分的文档，请及时关注。</p>
<h2 id="依赖关系"><a href="#%E4%BE%9D%E8%B5%96%E5%85%B3%E7%B3%BB" class="headerlink" title="依赖关系"></a>依赖关系</h2><p>Admui 依赖于两个主要框架(库)。源码包中已经包含这两个框架(库)，无需再手动下载：</p>
<ul>
<li><a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/" target="_blank" rel="noopener">BootStrap 4.1.3</a></li>
<li><a href="http://jquery.com/" target="_blank" rel="noopener">jQuery 3.3.1+</a></li>
</ul>
<h2 id="包含内容"><a href="#%E5%8C%85%E5%90%AB%E5%86%85%E5%AE%B9" class="headerlink" title="包含内容"></a>包含内容</h2><p>Admui 提供了自动构建和基础源码两种不同的版本。</p>
<h3 id="自动构建"><a href="#%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA" class="headerlink" title="自动构建"></a>自动构建</h3><p>如果您购买源码时选择的前端源码是自动构建，下载源码解压后，大体源码结构如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Admui/</span><br><span class="line">    ├── build/ (Gulp任务流)</span><br><span class="line">    │   ├── configuration/</span><br><span class="line">    │   └── tasks/</span><br><span class="line">    ├── public/</span><br><span class="line">    │   ├── data/ (模拟数据)</span><br><span class="line">    │   ├── fonts/ (字体图标)</span><br><span class="line">    │   ├── images/ (图片文件)</span><br><span class="line">    │   └── vendor/ (插件)</span><br><span class="line">    ├── src/</span><br><span class="line">    │   ├── assets/ (静态资源)</span><br><span class="line">    │   │      ├── js/</span><br><span class="line">    │   │      └── scss/</span><br><span class="line">    │   ├── fonts/ (字体图标)</span><br><span class="line">    │   ├── templates/ (页面)</span><br><span class="line">    │   ├── themes/ (主题)</span><br><span class="line">    │   │      ├── base/ (布局)</span><br><span class="line">    │   │      ├── topbar/ (布局)</span><br><span class="line">    │   │      └── global/</span><br><span class="line">    │   └── .csscomb.json</span><br><span class="line">    ├── package.json</span><br><span class="line">    ├── gulpfile.js</span><br><span class="line">    ├── .eslintrc(eslint配置)</span><br><span class="line">    ├── README.md</span><br><span class="line">    ├── .gitignore</span><br><span class="line">    └── LICENSE</span><br></pre></td></tr></table></figure>
<p>对于包含自动构建部分的前端源码，可以通过命令行来开发和调试，请参考 <a href="build.html">构建工具</a>。</p>
<h3 id="基础源码"><a href="#%E5%9F%BA%E7%A1%80%E6%BA%90%E7%A0%81" class="headerlink" title="基础源码"></a>基础源码</h3><p>如果您购买源码时选择的前端源码是基础源码，下载源码解压后，大体源码结构如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Admui/</span><br><span class="line">    ├── html/ (页面)</span><br><span class="line">    ├── public/</span><br><span class="line">    │   ├── css/ (样式文件)</span><br><span class="line">    │   ├── data/ (模拟数据)</span><br><span class="line">    │   ├── fonts/ (字体图标)</span><br><span class="line">    │   ├── images/ (图片文件)</span><br><span class="line">    │   ├── js/ (js文件)</span><br><span class="line">    │   ├── themes/ (主题)</span><br><span class="line">    │   │     ├── base/ (布局)</span><br><span class="line">    │   │     ├── topbar/ (布局)</span><br><span class="line">    │   │     └── global/</span><br><span class="line">    │   └── vendor/ (插件)</span><br><span class="line">    ├── README.md</span><br><span class="line">    └── LICENSE</span><br></pre></td></tr></table></figure>
<h2 id="运行项目"><a href="#%E8%BF%90%E8%A1%8C%E9%A1%B9%E7%9B%AE" class="headerlink" title="运行项目"></a>运行项目</h2><h3 id="自动构建-1"><a href="#%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA-1" class="headerlink" title="自动构建"></a>自动构建</h3><p>您必须下载和安装 node.js(包含 npm)，npm 是 node 的包管理工具。您可以使用<code>node --version</code>和<code>npm --version</code>来检查是否已经安装 node 和 npm。如果您已经安装了 node.js，请忽略此步骤。</p>
<p>您可以从<a href="https://nodejs.org/zh-cn/download/" target="_blank" rel="noopener">这里下载 Node.js</a>.</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"># 安装依赖包:</span><br><span class="line">npm install</span><br><span class="line"></span><br><span class="line"># 启动项目</span><br><span class="line">npm run [dev | build][:topbar]</span><br><span class="line"># dev: 运行开发环境，提供浏览器自动刷新、增量编译、未压缩静态文件等;</span><br><span class="line"># build: 部署生产环境，合并压缩、替换路径、添加版本号等;</span><br><span class="line"># topbar: 指定编译的主题布局，默认执行base布局编译。（例：npm run dev:topbar）</span><br></pre></td></tr></table></figure>
<blockquote>
<p>假如您只购买了 topbar 布局，您也需要使用布局参数来指定编译的主题布局。</p>
</blockquote>
<p>更多 Gulp 编译命令请阅读<code>gulpfile.js</code>，您可以在<code>build/configuration/config.js</code>或<code>build/configuration/config.json</code>中更改配置信息，通过 gulp 构建项目到指定的目录中。</p>
<h3 id="基础源码-1"><a href="#%E5%9F%BA%E7%A1%80%E6%BA%90%E7%A0%81-1" class="headerlink" title="基础源码"></a>基础源码</h3><p>直接打开 html 文件即可预览，某些页面中包含 ajax 内容，所以最好在服务器环境（如 localhost）下打开。</p>
<p>如果您希望定制主题或通过 Gulp 自动构建项目，您可以通过在线升级的方式购买自动构建部分。<a href="http://www.admui.com/user" target="_blank" rel="noopener">升级</a></p>
<h2 id="浏览器支持"><a href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E6%94%AF%E6%8C%81" class="headerlink" title="浏览器支持"></a>浏览器支持</h2><p>Admui 可以很好的支持最新版的 PC 浏览器和智能设备浏览器，支持的浏览器如下：</p>
<table>
<thead>
<tr>
<th>浏览器</th>
<th style="text-align:center">Windows</th>
<th style="text-align:center">MacOS(10.9+)</th>
<th style="text-align:center">IOS(7.1.2+)</th>
<th style="text-align:center">Android(4.1+)</th>
</tr>
</thead>
<tbody>
<tr>
<td>IE 6-11</td>
<td style="text-align:center">C</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">N/A</td>
</tr>
<tr>
<td>Edge</td>
<td style="text-align:center">A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">N/A</td>
</tr>
<tr>
<td>Chrome（谷歌）</td>
<td style="text-align:center">A</td>
<td style="text-align:center">A</td>
<td style="text-align:center">A</td>
<td style="text-align:center">A</td>
</tr>
<tr>
<td>Firefox（火狐）</td>
<td style="text-align:center">A</td>
<td style="text-align:center">A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td>Safari</td>
<td style="text-align:center">-</td>
<td style="text-align:center">A</td>
<td style="text-align:center">A</td>
<td style="text-align:center">N/A</td>
</tr>
<tr>
<td>360 极速浏览器</td>
<td style="text-align:center">A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td>搜狗浏览器</td>
<td style="text-align:center">A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td>QQ 浏览器</td>
<td style="text-align:center">A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td>百度浏览器</td>
<td style="text-align:center">A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td>猎豹浏览器</td>
<td style="text-align:center">A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td>微信浏览器</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">A</td>
<td style="text-align:center">A</td>
</tr>
<tr>
<td>钉钉浏览器</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">N/A</td>
<td style="text-align:center">A</td>
<td style="text-align:center">A</td>
</tr>
</tbody>
</table>
<blockquote>
<p>Notes：X：不支持；A：支持最好；B：支持一般；C：支持糟糕；-：未测试；N/A：不存在。</p>
</blockquote>
<p>更多信息请访问 <a href="https://getbootstrap.com/docs/4.1/getting-started/browsers-devices/" target="_blank" rel="noopener">BootStrap 文档</a>。</p>

    
    <div class="page-links">
        
        
        <span style="float:right"><a href="themes.html">下一页：主题说明 &rang;</a></span>
        
    </div>
    
    <div class="footer">
    &copy; 2015-2018
    <a href="http://www.admui.com/">Admui</a>
    ·
    上海畅控
</div>
</div>

        
    </div>
    

    <script src="https://cdn.staticfile.org/smooth-scroll/14.2.1/smooth-scroll.min.js"></script>
    <script src="http://cdn.admui.com/docs/common/js/common.js"></script>

    <script src="https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>

</body>

</html>